<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
	<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

	<meta name="description" content=" 		Click the '..' button to activate a calendar. 		Electric is set to false, so the dates are not updated when you scroll forwards or backwards in months and years. 		You cannot choose a date prior to today. 		You cannot choose the check-out date prior to the check-in date. 		Clicking the Reset button clears the dates. 		The default date in the Check-out calendar is the date chosen in the Check-in calendar. This is useful when the Check-in date is several months in the future, so the user doesn't need to scroll twice. 		After you choose the check-in and check-out dates, the range between them becomes highlighted. 		Disabled dates are strike-through. ">
	<meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools">
	<title>Zapatec DHTML Calendar Widget - Two Coordinated Dates Highlight the Dates in Between</title>

	<!-- Common JS files -->
	<script type='text/javascript' src='../../utils/zapatec.js'></script>

	<!-- Custom includes -->	
		<!-- import the calendar script -->
		<script type='text/javascript' src='../../utils/zpdict.js'></script>
		<script type="text/javascript" src="../../utils/lang/zpdate-en.js"></script>
		<script type="text/javascript" src="../../utils/zpdate.js"></script>
		<script type="text/javascript" src="../src/calendar.js"></script>

		<!-- other languages might be available in the lang directory; please check
		your distribution archive. -->


	<!-- ALL demos need these css -->
	<link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css">
	<link href="../../website/css/template.css" rel="stylesheet" type="text/css">
	<style type="text/css">
		body {
			width: 778px;
		}
	</style>

	<!-- Theme css -->
	<link href="../themes/win2k.css" rel="stylesheet" type="text/css">

	<link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico">
	

      <style type="text/css">
         /* Define elements to show start/end dates and the dates in between */

         /* for start/end dates */
         .edges {
            border : 1px solid;
            border-color: #adaa9c #fff #fff #adaa9c;
            background-color: #fffbee;
         }

         /* for dates between start and end dates */
         .between {
            background-color: #dccdb9;
         }

         .calendar tbody .disabled {
		 	text-decoration: line-through; color:#000
		 }
      </style>


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Two Coordinated Dates Highlight the Dates in Between</div>

		<div class='zpCalDemoText'>
			<ul>
				<li>This demo uses the <b>win2k theme</b>.</li>
				
		<li>Click the '..' button to activate a calendar.</li>
		<li>Electric is set to false, so the dates are not updated when you scroll forwards or backwards in months and years.</li>
		<li>You cannot choose a date prior to today.</li>
		<li>You cannot choose the check-out date prior to the check-in date.</li>
		<li>Clicking the Reset button clears the dates.</li>
		<li>The default date in the Check-out calendar is the date chosen in the Check-in calendar. This is useful when the Check-in date is several months in the future, so the user doesn't need to scroll twice.</li>
		<li>After you choose the check-in and check-out dates, the range between them becomes highlighted.</li>
		<li>Disabled dates are strike-through.</li>

			</ul>
		</div>


	<form name="form1" action="" method="POST" onReset='resetDates()'>
		<table>
			<tr>
				<td class='zpCalSubheader'>
					Location:
				</td>
				<td>
					<input type="text" name="location" id="location" />
				</td>
			</tr>
			<tr>
				<td class='zpCalSubheader'> Check-in Date: </td>
				<td>
					<input type="text" name="date8a" id="departure_date" />
					<input type="button" value=" ... " id='button8a'>
				</td>
			</tr>
			<tr>
				<td class='zpCalSubheader'> Check-out Date: </td>
				<td>
					<input type="text" name="date8b" id="arrivalDate" />
					<input type="button" value=" ... " id='button8b'>
				</td>
			</tr>
			<tr>
				<td>
					<input type="submit" name="Submit2" value="Check" class="button" onFocus="if(this.blur)this.blur()">
				</td>
				<td>
					<input type="reset" name="Submit22" value="Reset" class="button" onFocus="if(this.blur)this.blur()">
				</td>
			</tr>
		</table>
	</form>
	<script type="text/javascript">
		<!--  to hide script contents from old browsers
			var startDate;
			var endDate;
			var callbacks = 0;

			function resetDates() {
				startDate = endDate = null;
			}

			/*
			 * Given two dates (in seconds) find out if date1 is bigger, date2 is bigger or
			 * they're the same, taking only the dates, not the time into account.
			 * In other words, different times on the same date returns equal.
			 * returns -1 for date1 bigger, 1 for date2 is bigger 0 for equal
			 */

			function compareDatesOnly(date1, date2) {
				var year1 = date1.getYear();
				var year2 = date2.getYear();
				var month1 = date1.getMonth();
				var month2 = date2.getMonth();
				var day1 = date1.getDate();
				var day2 = date2.getDate();

				if (year1 > year2) {
					return -1;
				}
				if (year2 > year1) {
					return 1;
				}

				//years are equal
				if (month1 > month2) {
					return -1;
				}
				if (month2 > month1) {
					return 1;
				}

				//years and months are equal
				if (day1 > day2) {
					return -1;
				}
				if (day2 > day1) {
					return 1;
				}

				//days are equal
				return 0;


				/* Can't do this because of timezone issues
				var days1 = Math.floor(date1.getTime()/Date.DAY);
				var days2 = Math.floor(date2.getTime()/Date.DAY);
				return (days1 - days2);
				*/
			}

			function filterDates1(thiscal) {
				startDate = thiscal.config.date;
				/* If they haven't chosen an
				end date before we'll set it to the same date as the start date This
				way if the user scrolls in the start date 5 months forward, they don't
				need to do it again for the end date.
				*/

				if (endDate == null) {
			        	cal1.config.date = startDate;
			        }

			}


			function filterDates2(thiscal) {
				endDate = thiscal.config.date;
			}


			/*
			* Both functions disable and hilight dates.
			*/

			/*
			* Can't choose days after the
			* end date if it is choosen, hilights start and end dates with one style and dates between them with another
			*/
			function dateInRange1(date) {

				if (endDate != null) {

					// Disable dates after end date
					var compareEnd = compareDatesOnly(date, endDate);
					if  (compareEnd < 0) {
						return (true);
					}

					// Hilight end date with "edges" style
					if  (compareEnd == 0) {
						{return "edges";}
					}


					// Hilight inner dates with "between" style
					if (startDate != null){
						var compareStart = compareDatesOnly(date, startDate);
						if  (compareStart < 0) {
							return "between";
						}
					}
				}

				//disable days prior to today
				var today = new Date();
				var compareToday = compareDatesOnly(date, today);
				if (compareToday > 0) {
					return(true);
				}


				//all other days are enabled
				return false;
				//alert(ret + " " + today + ":" + date + ":" + compareToday + ":" + days1 + ":" + days2);
				return(ret);
			}

			/*
			* Can't choose days before the
			* start date if it is choosen, hilights start and end dates with one style and dates between them with another
			*/

			function dateInRange2(date) {
				if (startDate != null) {
					// Disable dates before start date
					var compareDays = compareDatesOnly(startDate, date);
					if  (compareDays < 0) {
						return (true);
					}

					// Hilight end date with "edges" style
					if  (compareDays == 0) {
						{return "edges";}
					}

					// Hilight inner dates with "between" style
					if ((endDate != null) && (date > startDate) && (date < endDate)) {
						return "between";
					}
				}

				var now = new Date();
				if (compareDatesOnly(now, date) < 0) {
					return (true);
				}

				//all other days are enabled
				return false;
			}
			// end hiding contents from old browsers  -->
	</script>
		<script type="text/javascript">
		var cal = new Zapatec.Calendar({
		
				inputField     :    "departure_date",   // id of the input field
				button         :    "button8a",  // What will trigger the popup of the calendar
				ifFormat       :    "%Y-%m-%d ",       // format of the input field
				timeFormat     :    "24",
				electric       :     false,
				dateStatusFunc :    dateInRange1, //the function to call
				onUpdate       :    filterDates1,
				theme          :    "win2k"

		});
		
		
		var cal1 = new Zapatec.Calendar({
			
				inputField     :    "arrivalDate",
				button         :    "button8b",  // What will trigger the popup of the calendar
				ifFormat       :    "%Y-%m-%d ",
				timeFormat     :    "24",
				electric       :     false,
				dateStatusFunc :    dateInRange2, //the function to call
				onUpdate       :    filterDates2,
				theme          :    "win2k"

			});
 		
	</script>

	<noscript>
		<br/>
		This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'>
		AJAX Component</a> - Zapatec DHTML Calendar Widget, but your browser does not support Javascript.
		<br/>
		<br/>
	</noscript>
		<br/><br/><br/>
		<div class="footer" style='width: 778px; text-align:center; margin-top:2em'>
		&copy; 2004-2009 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
		</div>
</body>
</html>
